<!--  -->
 
<!-- 这个指令如果丢了 拖放就不会自动排序 ，拖到哪放哪 -->
<ul class="example-list" (cdkDropListDropped)="drop($event)" (cdkDropListSorted)="dropStart($event)" cdkDropList>
    <li *ngFor="let li of lists" [style.color]="li" class="example-box"  cdkDrag>{{li}}</li>
</ul>
<div class="drag">
    <!-- 拖曳鼠标样式要手动加上 -->
    <svg width="100" height="100" cdkDrag>
        <!-- 多边形就是一笔画，顺序很重要-->
        <polygon points="50,0 0,10 100,10 10,100 90,100" style="stroke: aquamarine;stroke-width:1;fill:cadetblue;">
        </polygon>
    </svg>
    <svg height="210" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
        style="stroke: aquamarine;stroke-width:1;fill:cadetblue;cursor: move;fill-rule: evenodd;" />
      </svg>
</div>

<div style="display: flex;"> 
    <!-- 联动的两个列表 -->
    <div>
        <h2>todo</h2>
        <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]"
            class="example-list" (cdkDropListDropped)="drop2($event)" >
            <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
        </div>
    </div>
    <div class="example-container">
        <h2>Done</h2>
        <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]"
            class="example-list" (cdkDropListDropped)="drop2($event)">
            <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
        </div>
    </div>  
</div>
<h3>参考网址<a href="https://material.angular.io/cdk/drag-drop/overview" target="_blank">https://material.angular.io/cdk/drag-drop/overview</a></h3>
  <div id="video"></div>
  